<template>
  <div class="notice-information">
    <el-dialog :title="dialogTitle" v-model="trafficStore.publicNoticeVisible" width="40%">
      <hr style="margin-bottom: 10px;" color="#f0f0f0" />
      <div class="dialog-content" style="border: 1px solid #f0f0f0;">
        <div style="background-color: #f0f0f0; padding: 10px;">
          <h3>发布公告的区域与物业电话</h3>
        </div>
        <div class="toolbar">
          <el-input v-model="keyword" style="width: 240px" placeholder="请输入关键词" />
          <el-button type="default" class="refresh-btn" style="margin-left: 12px;" @click="refreshNoticeList">
            <i class="iconfont icon-shuaxin"></i>
          </el-button>
          <!-- <el-tooltip content="导出Excel表格" placement="top">
            <el-button type="default" class="excel-btn" @click="exportExcel">
              <i class="iconfont icon-Excel"></i>
            </el-button>
          </el-tooltip> -->
        </div>
        <el-table :data="pageList" stripe style="width: 100%">
          <el-table-column prop="name" label="区域名称" />
          <el-table-column prop="tel" label="物业电话" />
        </el-table>
        <div style="display: flex; justify-content: center; padding: 10px;">
          <el-pagination size="small" background layout="prev, pager, next" :total="noticeList.length" class="mt-4"
            :page-size="5" :current-page="currentPage" @current-change="handleCurrentPage" />
        </div>
      </div>
      <h3>公告标题:</h3>
      <el-input v-model="noticeTitle" placeholder="请输入公告标题" type="textarea" style="margin-top: 20px;"></el-input>
      <h3>公告信息:</h3>
      <el-input v-model="noticeInfo" placeholder="请输入公告信息" type="textarea" style="margin-top: 20px;"></el-input>
      <div class="button-group">
        <el-button type="primary" @click="publishNotice">发布</el-button>
        <el-button type="default" @click="cancelNotice">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, onUnmounted, computed } from 'vue';
import { useTrafficStore } from "@/stores/counter";
import { storeToRefs } from 'pinia';
import { setNoticeHttp } from '@/request/Http';
let $map = null;
let { proxy } = getCurrentInstance()
const { togglePublicNoticeVisible } = useTrafficStore()
const { publicNoticeList } = storeToRefs(useTrafficStore());
const trafficStore = useTrafficStore()
const dialogTitle = ref('公告信息');
const keyword = ref('')
const noticeTitle = ref('')
const noticeInfo = ref('')
const currentPage = ref(1)
//搜索框刷新
const refreshNoticeList = () => {
  keyword.value = ''
  //重新请求数据
  pageList.value = noticeList.value.slice(0, 5)
}
//根据搜索内容过滤列表
const noticeList = computed({
  get: () => {
    if (!keyword.value) {
      return publicNoticeList.value
    } else {
      //地址或电话查询
      keyword.value = keyword.value.trim()
      return pageList.value = publicNoticeList.value.filter(item =>
        item.name.includes(keyword.value) || item.tel.includes(keyword.value)
      )
    }
  },
  set: (val) => {
    pageList.value = val.slice((currentPage.value - 1) * 5, currentPage.value * 5)
  }
})
// 导出表格
const exportExcel = () => {
}
// 初始化分页列表
const pageList = ref([])

pageList.value = noticeList.value.slice(0, 5)

//分页逻辑
const handleCurrentPage = (page) => {
  currentPage.value = page
  pageList.value = noticeList.value.slice((page - 1) * 5, page * 5)
}
//发布公告
const publishNotice = async () => {
  if (!noticeTitle.value || !noticeInfo.value) {
    alert('公告标题和公告信息不能为空')
    return
  }
  else {
    await setNoticeHttp({
      title: noticeTitle.value,
      content: noticeInfo.value,
    })
    trafficStore.publicNoticeSource.clear()
    togglePublicNoticeVisible()
  }
}
//取消发布公告
const cancelNotice = () => {
  // trafficStore.publicNoticeSource.clear()
  togglePublicNoticeVisible()
}
onMounted(() => {
  $map = proxy.$map;
})
onUnmounted(() => {
  trafficStore.publicNoticeSource.clear()
})
</script>

<style scoped>
.toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.toolbar {
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
